<template>
	<view class="">
		<u-navbar title="预约试骑" :autoBack="true" :placeholder="true"></u-navbar>

		<image src="https://wyc.jslhkj.cn/uploads/20231031/61fdba49dff841cde071dddabaed0a5e.jpg" mode=""
			class="bg-login"></image>

		<view class="yy-form">
			<view class="input-cell">
				<view class="input-label">01.您的性别是？</view>
				<view class="input-box">
					<radio-group @change="radioChange" class="radio-group" size="10">
						<label class="weui-cell weui-check__label" v-for="item in sexs" key="index">
							<view class="weui-cell__hd">
								<radio :value="item.value" color="#000" class="sex" :checked="item.checked" />
							</view>
							<view class="weui-cell__bd">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>

			<view class=" input-cell">
				<view class="input-label">02.您的年龄是？</view>
				<view class="input-box">
					<radio-group @change="ageChange" class="radio-group">
						<label class="weui-cell weui-check__label" v-for="item in ages" key="index">
							<view class="weui-cell__hd">
								<radio :value="item.name" color="#000" class="sex" :checked="item.checked" />
							</view>
							<view class="weui-cell__bd">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class=" input-cell">
				<view class="input-label">03.您目前的婚姻状况是？</view>
				<view class="input-box">
					<view class="input-box">
						<radio-group @change="maritalChange" class="radio-group">
							<label class="weui-cell weui-check__label" wx:for="item in maritals" key="index">
								<view class="weui-cell__hd">
									<radio :value="item.name" color="#000" class="sex" :checked="item.checked" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class=" input-cell">
				<view class="input-label">04.您所在的城市是？</view>
				<view class="input-box">
					<input type="text" class="input" v-model="city" placeholder="请输入城市" @input="cityChange">
				</view>
			</view>

			<view class="input-cell">
				<view class="input-label">05.您目前从事的行业？</view>
				<view class="input-box">
					<input type="text" class="input" v-model="occupation" placeholder="请输入行业" @click="occupationChange">
				</view>
			</view>

			<view class=" input-cell">
				<view class="input-label">06.您的月收入？</view>
				<view class="input-box">
					<view class="input-box">
						<radio-group @change="incomeChange" class="radio-group">
							<label class="weui-cell weui-check__label" v-for="item in incomes" key="index">
								<view class="weui-cell__hd">
									<radio :value="item.name" color="#000" class="sex" :checked="item.checked" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class=" input-cell">
				<view class="input-label">07.您的业余爱好？</view>
				<view class="input-box">
					<input type="text" class="input" v-model="hobbies" placeholder="请输入业余爱好" @click="hobbiesChange">
				</view>
			</view>
			<view class=" input-cell">
				<view class="input-label">08.您是否了解过ebike？</view>
				<view class="input-box">
					<view class="input-box">
						<radio-group @change="radioChange" class="radio-group">
							<label class="weui-cell weui-check__label" v-for="item in knows" key="index">
								<view class="weui-cell__hd">
									<radio :value="item.value" color="#000" class="sex" :checked="item.checked" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<view class="input-cell">
				<view class="input-label">09.您觉得您可以接受的价格区间？</view>
				<view class="input-box">
					<view class="input-box">
						<radio-group @change="priceChange" class="radio-group">
							<label class="weui-cell weui-check__label" wx:for="item in prices" key="index">
								<view class="weui-cell__hd">
									<radio :value="item.name" color="#000" class="sex" :checked="item.checked" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<view class=" input-cell">
				<view class="input-label">10.您会在哪些场景使用？</view>
				<view class="input-box">
					<checkbox-group name="" class="checkbox-group" @change="scenarioChange">
						<label v-for="item in scenarios" key="index">
							<checkbox :value="item.name" color="#000" /><text>{{item.name}}</text>
						</label>
					</checkbox-group>
				</view>
			</view>

			<button @click="addquestionnaire" class="submit-btn">提交</button>

			<view class="gxcy" style="text-align: center;">
				感谢您的参与！
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: wx.getStorageSync('userId'),
				city: '', //城市
				occupation: '', //行业
				income: '10000元以下', //收入
				age: '18-20', //年龄
				sex: '1', //性别
				marital: '未婚', //婚姻状况
				knowledge: '0', //是否了解本产品
				scenario: [], //场景
				hobbies: '', //业余爱好
				price: '8000以下', //价格区间
				sexs: [{
					value: '1',
					name: '男',
					checked: true
				}, {
					value: '0',
					name: '女'
				}],
				ages: [{
					value: '1',
					name: '18-30',
					checked: true
				}, {
					value: '2',
					name: '31-40'
				}, {
					value: '3',
					name: '41-50'
				}, {
					value: '4',
					name: '51-60'
				}, {
					value: '5',
					name: '60以上'
				}],
				maritals: [{
					value: '1',
					name: '未婚',
					checked: true
				}, {
					value: '2',
					name: '已婚，无子女'
				}, {
					value: '3',
					name: '已婚，有子女'
				}, {
					value: '4',
					name: '其他'
				}],
				incomes: [{
					value: '1',
					name: '10000元以下',
					checked: true
				}, {
					value: '2',
					name: '10000-20000元'
				}, {
					value: '3',
					name: '20000-30000元'
				}, {
					value: '4',
					name: '30000元以上'
				}],
				knows: [{
					value: '1',
					name: '是',
					checked: true
				}, {
					value: '0',
					name: '否'
				}],
				prices: [{
					value: '1',
					name: '8000元以下',
					checked: true
				}, {
					value: '2',
					name: '8000-10000元'
				}, {
					value: '3',
					name: '10000-15000元'
				}, {
					value: '4',
					name: '15000-20000元'
				}, {
					value: '5',
					name: '20000元以上'
				}],
				scenarios: [{
					value: '1',
					name: '通勤',
					checked: true
				}, {
					value: '2',
					name: '短途出行'
				}, {
					value: '3',
					name: '运动骑行'
				}, {
					value: '4',
					name: '户外营地骑行'
				}, {
					value: '5',
					name: '亲子活动'
				}]
			}
		},

		onLoad() {

		},

		methods: {
			async addquestionnaire() {
				let _this = this;
				let patams = {
					uid: _this.uid,
					gender: _this.sex,
					age: _this.age,
					marital_status: _this.marital,
					city: _this.city,
					occupation: _this.occupation,
					monthly_income: _this.income,
					hobbies: _this.hobbies,
					product_knowledge: _this.knowledge,
					price_range: _this.price,
					usage_scenarios: _this.scenario
				};
				let res = await this.$api.addquestionnaire(JSON.stringify(patams));
				if (res.code == 1) {
					// wx.$toast('提交成功！')

					wx.showModal({
						showCancel: false,
						title: '提交成功'
					})
				}
				console.log(res);
			},

			// 性别切换
			radioChange(e) {
				this.sex = e.detail.value
			},
			// 年龄
			ageChange(e) {
				this.age = e.detail.value
			},
			// 城市切换
			cityChange(e) {
				this.city = e.detail.value
			},
			// 婚姻状况切换
			maritalChange(e) {
				this.marital = e.detail.value
			},
			// 行业
			occupationChange(e) {
				this.occupation = e.detail.value
			},
			// 收入
			incomeChange(e) {
				this.income = e.detail.value
			},
			// 价格区间
			priceChange(e) {
				this.price = e.detail.value
			},
			hobbiesChange(e) {
				this.hobbies = e.detail.value
			},
			// 使用场景选择
			scenarioChange(e) {
				console.log(e);
				this.scenario = e.detail.value
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bg-login {
		width: 100vw;
		height: 480rpx;
		// position: absolute;
		z-index: -100;
	}

	.submit-btn {
		background-color: #111;
		color: white;
		margin: 50rpx 20rpx 0 20rpx;
		border-radius: 50rpx;
	}

	.yy-form {
		background-color: white;
		padding-bottom: 20rpx;
	}

	.input-cell {
		line-height: 80rpx;
		padding: 0 80rpx;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;

	}

	.input {
		height: 80rpx;
		background-color: #eee;
		width: calc(100% - 20rpx);
		padding-left: 20rpx;
		border-radius: 10rpx;
	}

	.input-label {
		font-weight: 700;
	}

	.input-box {
		flex: 2;
	}


	.gxcy {
		margin-bottom: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #666;
	}



	// 性别
	.radio-group {
		display: flex;
		font-size: 24rpx;
		flex-wrap: wrap;

		.weui-cell {
			display: flex;

			.weui-cell__hd {
				width: 50rpx;
			}

			.sex {
				margin-left: 5rpx;
				transform: scale(0.7)
			}
		}
	}

	.checkbox-group {
		display: flex;
		font-size: 24rpx;
		flex-wrap: wrap;
	}
</style>